<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn1">+</button>
    <span id="count">0</span>
    <button id="btn2">-</button>
    <script src="redux.min.js"></script>
    <script>
        // 3,存储默认状态
        let initialStore = { count: 0 }
        // // 1,创建 Store 对象
        let store = Redux.createStore(reducer)
        // // 2，创建 reducer 函数
        function reducer(store = initialStore, action) {
            switch (action.type) {
                case "increment":
                    return { count: store.count + 1 }
                case "decrement":
                    return { count: store.count - 1 }
                default:
                    return store
            }

        }
        // 4,定义action
        let increment = { type: "increment" };
        let decrement = { type: "decrement" };
        // 5，获取按钮，给按钮添加点击事件
        document.getElementById("btn1").onclick = function () {
            // 6，出发 action
            store.dispatch(increment)
        }
        document.getElementById("btn2").onclick = function () {
            store.dispatch(decrement)
        }
        // 7.订阅 store
        store.subscribe(()=>{
            // 获取Store中对象存储的状态
            document.getElementById("count").innerHTML = store.getState().count
        })
    </script>
</body>

</html>